<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,inital-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link type="text/css" rel="stylesheet" href="css/liMarquee.css">
    <link type="text/css" rel="stylesheet" href="css/idangerous.swiper.css">
    <link type="text/css" rel="stylesheet" href="css/common.css">
    <link type="text/css" rel="stylesheet" href="css/index1.css">
    <link type="text/css" rel="stylesheet" href="css/index2.css">
    <title>第一屏</title>
</head>
<body>
<div class="main">
    <header>
        <h3>领导驾驶舱</h3>
        <ul>
            <li onclick="fullScreen()">
                <img src="images/head/f1.png"/>
                全屏显示
            </li>
            <li onclick="exitScreen()">
                <img src="images/head/t1.png"/>
                退出全屏
            </li>
            <li>
                <img src="images/head/c1.png"/>
                关闭驾驶舱
            </li>
        </ul>
    </header>
    <div class="main1">
        <div class="main1_row1 clearfix">
            <div class="section1">
                <h2 class="modules_title"><img src="images/title_icon.png">项目安全状况</h2>
                <div id="chart1">
                </div>
                <span class="type">较安全</span>
            </div>

            <div class="section2">
                <h2 class="modules_title"><img src="images/title_icon.png">安全管控指标</h2>
                <div class="section2_main swiper-container swiper-container1">
                    <div class="swiper-wrapper">
                        <div class="sec2_div clearfix swiper-slide">
                            <div class="sec2_box fl">
                                <div class="secT_div secT_div1"><h4 class="sec2_title sec2_title1">安全风险</h4></div>
                                <ul class="sec2_list sec2_list1">
                                    <li><img src="images/sec2_icon1.png">一级风险：<span>20</span></li>
                                    <li><img src="images/sec2_icon2.png">二级风险：<span>10</span></li>
                                    <li><img src="images/sec2_icon3.png">当前高风险作业：<span>2</span></li>
                                </ul>
                            </div>
                            <div class="sec2_box fl">
                                <div class="secT_div secT_div2"><h4 class="sec2_title sec2_title2">隐患治理</h4></div>
                                <ul class="sec2_list sec2_list2">
                                    <li><img src="images/sec2_icon4.png">未关闭隐患：<span>6</span></li>
                                    <li><img src="images/sec2_icon5.png">逾期未整改隐患：<span>20</span></li>
                                    <li><img src="images/sec2_icon6.png">隐患整改率：<span>2</span></li>
                                </ul>
                            </div>
                        </div>

                        <div class="sec2_div clearfix swiper-slide">
                            <div class="sec2_box fl">
                                <div class="secT_div secT_div1"><h4 class="sec2_title sec2_title1">危大工程</h4></div>
                                <ul class="sec2_list sec2_list1">
                                    <li><img src="images/sec2_icon7.png">危大工程辨识：<span>20</span></li>
                                    <li><img src="images/sec2_icon8.png">正在施工危大工程：<span>10</span></li>
                                    <li><img src="images/sec2_icon9.png">危大工程验收：<span>2</span></li>
                                </ul>
                            </div>
                            <div class="sec2_box fl">
                                <div class="secT_div secT_div2"><h4 class="sec2_title sec2_title2">安全培训</h4></div>
                                <ul class="sec2_list sec2_list2">
                                    <li><img src="images/sec2_icon10.png">培训次数：<span>6</span></li>
                                    <li><img src="images/sec2_icon11.png">培训人数：<span>20</span></li>
                                    <li><img src="images/sec2_icon12.png">培训合格率：<span>2</span></li>
                                </ul>
                            </div>
                        </div>

                        <div class="sec2_div clearfix swiper-slide">
                            <div class="sec2_box fl">
                                <div class="secT_div secT_div1"><h4 class="sec2_title sec2_title1">特种设备</h4></div>
                                <ul class="sec2_list sec2_list1">
                                    <li><img src="images/sec2_icon13.png">特种设备总数：<span>20</span></li>
                                    <li><img src="images/sec2_icon14.png">已验收特种设备：<span>10</span></li>
                                    <li><img src="images/sec2_icon15.png">逾期未检测特种设备：<span>2</span></li>
                                </ul>
                            </div>
                            <div class="sec2_box fl">
                                <div class="secT_div secT_div2"><h4 class="sec2_title sec2_title2">例行工作</h4></div>
                                <ul class="sec2_list sec2_list2">
                                    <li><img src="images/sec2_icon16.png">当月违章人次：<span>6</span></li>
                                    <li><img src="images/sec2_icon17.png">项目经理月带班：<span>20</span></li>
                                    <li><img src="images/sec2_icon18.png">当月安全会议：<span>2</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="pagination"></div>
                </div>
            </div>

            <div class="section3">
                <h2 class="modules_title"><img src="images/title_icon.png">安全预警指标</h2>
                <div class="warn" id="warn">
                    <ul class="warn_list">
                        <li><span>待监控重大风险数量</span><a href="">2</a></li>
                        <li><span>待监控高风险作业数量</span><a href="">10</a></li>
                        <li><span>逾期未整改重大隐患数量</span><a href="">9</a></li>
                        <li><span>逾期未整改一般隐患占比</span><a href="">20%</a></li>
                        <li><span>连续未检查天数</span><a href="">10</a></li>
                        <li><span>待监控重大风险数量</span><a href="">2</a></li>
                        <li><span>待监控高风险作业数量</span><a href="">10</a></li>
                        <li><span>逾期未整改重大隐患数量</span><a href="">9</a></li>
                        <li><span>逾期未整改一般隐患占比</span><a href="">20%</a></li>
                        <li><span>连续未检查天数</span><a href="">10</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="main1_row2 clearfix">
            <div class="section4">
                <h2 class="modules_title" style="padding: 0 0.3rem;"><img src="images/title_icon.png">隐患排查治理</h2>
                <ul class="dynamic_list dynamic_list1 clearfix">
                    <li class="selected">按类别</li>
                    <li>按区域</li>
                    <li>按单位</li>
                </ul>
                <div class="section4_main">
                    <div class="section4_div " id="chart2">
                    </div>

                    <div class="table_dox1" style="display: none">
                        <table class="sec4_table">
                            <tr>
                                <th>分包商</th>
                                <th>未关闭一般隐患<br>（占比）</th>
                                <th>未关闭重大隐患<br>（占比）</th>
                                <th>一般隐患<br>整改率</th>
                                <th>重大隐患<br>整改率</th>
                            </tr>
                            <tr>
                                <td><span class="cp_name">云南友谦建筑劳务分包有限公司</span></td>
                                <td class="color1">9(90%)</td>
                                <td class="color2">4(40%)</td>
                                <td>90%</td>
                                <td>60%</td>
                            </tr>
                            <tr>
                                <td><span class="cp_name">云南友谦建筑劳务分包有限公司</span></td>
                                <td class="color1">9(90%)</td>
                                <td class="color2">4(40%)</td>
                                <td>90%</td>
                                <td>60%</td>
                            </tr>
                            <tr>
                                <td><span class="cp_name">云南友谦建筑劳务分包有限公司云南友谦建筑劳务分包有限公司</span></td>
                                <td class="color1">9(90%)</td>
                                <td class="color2">4(40%)</td>
                                <td>90%</td>
                                <td>60%</td>
                            </tr>
                            <tr>
                                <td><span class="cp_name">云南友谦建筑劳务分包有限公司</span></td>
                                <td class="color1">9(90%)</td>
                                <td class="color2">4(40%)</td>
                                <td>90%</td>
                                <td>60%</td>
                            </tr>
                            <tr>
                                <td><span class="cp_name">云南友谦建筑劳务分包有限公司</span></td>
                                <td class="color1">9(90%)</td>
                                <td class="color2">4(40%)</td>
                                <td>90%</td>
                                <td>60%</td>
                            </tr>
                            <tr>
                                <td><span class="cp_name">云南友谦建筑劳务分包有限公司</span></td>
                                <td class="color1">9(90%)</td>
                                <td class="color2">4(40%)</td>
                                <td>90%</td>
                                <td>60%</td>
                            </tr>
                            <tr>
                                <td><span class="cp_name">云南友谦建筑劳务分包有限公司</span></td>
                                <td class="color1">9(90%)</td>
                                <td class="color2">4(40%)</td>
                                <td>90%</td>
                                <td>60%</td>
                            </tr>
                        </table>
                    </div>

                    <div class="table_dox2" style="display: none">
                        <table class="sec4_table">
                            <thead>
                            <tr>
                                <th>分包商</th>
                                <th>未关闭一般隐患<br>（占比）</th>
                                <th>未关闭重大隐患<br>（占比）</th>
                                <th>一般隐患<br>整改率</th>
                                <th>重大隐患<br>整改率</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><span class="cp_name">云南友谦建筑劳务分包有限公司</span></td>
                                <td class="color1">9(90%)</td>
                                <td class="color2">4(40%)</td>
                                <td>90%</td>
                                <td>60%</td>
                            </tr>
                            <tr>
                                <td><span class="cp_name">云南友谦建筑劳务分包有限公司</span></td>
                                <td class="color1">9(90%)</td>
                                <td class="color2">4(40%)</td>
                                <td>90%</td>
                                <td>60%</td>
                            </tr>
                            <tr>
                                <td><span class="cp_name">云南友谦建筑劳务分包有限公司云南友谦建筑劳务分包有限公司</span></td>
                                <td class="color1">9(90%)</td>
                                <td class="color2">4(40%)</td>
                                <td>90%</td>
                                <td>60%</td>
                            </tr>
                            <tr>
                                <td><span class="cp_name">云南友谦建筑劳务分包有限公司</span></td>
                                <td class="color1">9(90%)</td>
                                <td class="color2">4(40%)</td>
                                <td>90%</td>
                                <td>60%</td>
                            </tr>
                            <tr>
                                <td><span class="cp_name">云南友谦建筑劳务分包有限公司</span></td>
                                <td class="color1">9(90%)</td>
                                <td class="color2">4(40%)</td>
                                <td>90%</td>
                                <td>60%</td>
                            </tr>
                            <tr>
                                <td><span class="cp_name">云南友谦建筑劳务分包有限公司</span></td>
                                <td class="color1">9(90%)</td>
                                <td class="color2">4(40%)</td>
                                <td>90%</td>
                                <td>60%</td>
                            </tr>
                            <tr>
                                <td><span class="cp_name">云南友谦建筑劳务分包有限公司</span></td>
                                <td class="color1">9(90%)</td>
                                <td class="color2">4(40%)</td>
                                <td>90%</td>
                                <td>60%</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="section5">
                <h2 class="modules_title modules_title5" style="padding: 0 0.3rem;"><img src="images/title_icon.png"><span>风险动态治理</span></h2>
                <ul class="dynamic_list dynamic_list2 clearfix">
                    <li class="selected">今日风险</li>
                    <li>状态对比</li>
                    <li>类别分布</li>
                </ul>
                <div class="section5_main">
                    <div class="sec5_div2">
                        <table class="sec4_table">
                            <tr>
                                <th>危险作业类别</th>
                                <th>危险作业时间</th>
                                <th>危险作业区域</th>
                            </tr>
                            <tr>
                                <td>安全防护措施拆除申请</td>
                                <td>2019-02-28~2019-03-02</td>
                                <td>4号楼及附属地下室</td>
                            </tr>
                            <tr>
                                <td>安全防护措施拆除申请</td>
                                <td>2019-02-28~2019-03-02</td>
                                <td>4号楼及附属地下室</td>
                            </tr>
                            <tr>
                                <td>安全防护措施拆除申请</td>
                                <td>2019-02-28~2019-03-02</td>
                                <td>4号楼及附属地下室</td>
                            </tr>
                            <tr>
                                <td>安全防护措施拆除申请</td>
                                <td>2019-02-28~2019-03-02</td>
                                <td>4号楼及附属地下室</td>
                            </tr>
                            <tr>
                                <td>安全防护措施拆除申请</td>
                                <td>2019-02-28~2019-03-02</td>
                                <td>4号楼及附属地下室</td>
                            </tr>
                            <tr>
                                <td>安全防护措施拆除申请</td>
                                <td>2019-02-28~2019-03-02</td>
                                <td>4号楼及附属地下室</td>
                            </tr>
                            <tr>
                                <td>安全防护措施拆除申请</td>
                                <td>2019-02-28~2019-03-02</td>
                                <td>4号楼及附属地下室</td>
                            </tr>
                            <tr>
                                <td>安全防护措施拆除申请</td>
                                <td>2019-02-28~2019-03-02</td>
                                <td>4号楼及附属地下室</td>
                            </tr>
                            <tr>
                                <td>安全防护措施拆除申请</td>
                                <td>2019-02-28~2019-03-02</td>
                                <td>4号楼及附属地下室</td>
                            </tr>
                        </table>
                    </div>

                    <div class="sec5_div1 chart3" style="display: none">
                    </div>

                    <div class="sec5_div3 chart4" style="display: none">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="main2 clearfix"  style="display: none;" >

        <div class="main2-con1">
            <div class="t-t">
                <img src="images/title_icon.png"/>
                <span class="yl">危大工程管控</span>
            </div>
            <div class="main2-table">
                <table>
                    <tr>
                        <th>危大工程名称</th>
                        <th class="dd">预计施工开始时间</th>
                        <th class="dd">预计施工开始时间</th>
                        <th>验收次数</th>
                        <th>负责人</th>
                    </tr>
                    <tr>
                        <td>
                            <p>1#2#5#楼转#5#楼转换层模板#5#楼转换层#楼转#5#楼转换层模板#5#楼转换层模板#5#楼转换层模板换层模板支撑工程</p>
                        </td>
                        <td>2019-02-28</td>
                        <td>2019-03-01</td>
                        <td>3</td>
                        <td>张三</td>
                    </tr>
                    <tr>
                        <td>
                            <p>1#2#5#楼转换层模#楼转#5#楼转换层模板#5#楼转换层#楼转#5#楼转换层模板#5#楼转换层板支#楼转#5#楼转换层模板#5#楼转换层#楼转#5#楼转换层模板#5#楼转换层撑工程</p>
                        </td>
                        <td>2019-02-28</td>
                        <td>2019-03-01</td>
                        <td>3</td>
                        <td>张三</td>
                    </tr>
                    <tr>
                        <td>
                            <p>1#2#5#楼转换层模板支撑工程</p>
                        </td>
                        <td>2019-02-28</td>
                        <td>2019-03-01</td>
                        <td>3</td>
                        <td>张三</td>
                    </tr>
                    <tr>
                        <td>
                            <p>1#2#5#楼转换层模板支撑工程</p>
                        </td>
                        <td>2019-02-28</td>
                        <td>2019-03-01</td>
                        <td>3</td>
                        <td>张三</td>
                    </tr>
                    <tr>
                        <td>
                            <p>1#2#5#楼转换层模板支撑工程</p>
                        </td>
                        <td>2019-02-28</td>
                        <td>2019-03-01</td>
                        <td>3</td>
                        <td>张三</td>
                    </tr>
                    <tr>
                        <td>
                            <p>1#2#5#楼转换层模板支撑工程</p>
                        </td>
                        <td>2019-02-28</td>
                        <td>2019-03-01</td>
                        <td>3</td>
                        <td>张三</td>
                    </tr>
                    <tr>
                        <td>
                            <p>1#2#5#楼转换层模板支撑工程ff</p>
                        </td>
                        <td>2019-02-28</td>
                        <td>2019-03-01</td>
                        <td>3</td>
                        <td>张三</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="main2-con2">
            <div class="t-t">
                <img src="images/title_icon.png"/>
                <span class="yl">安全教育培训</span>
                <ul class="main2-nav2" >
                    <li class="active">培训人数</li>
                    <li>人均次数</li>
                    <li>人均学时</li>
                </ul>
            </div>
            <div class='main2-con2-echarts' style="display: block;"></div>
            <div class='main2-con2-echarts'></div>
            <div class='main2-con2-echarts'></div>
        </div>
        <div class="main2-con3">
            <div class="t-t">
                <img src="images/title_icon.png"/>
                <span class="yl">特种设备管理</span>
            </div>
            <div id="main2-echarts3"></div>
        </div>
        <div class="main2-con4">
            <div class="t-t">
                <img src="images/title_icon.png"/>
                <span class="yl">班组管理</span>
                <ul class="main2-nav4">
                    <li class="active">班前会</li>
                    <li>违章分布</li>
                </ul>
            </div>
            <ul class="main2-echarts4" >
                <li id="main2-echarts4_1"></li>
                <li id="main2-echarts4_2" ></li>
                <li id="main2-echarts4_3"></li>
                <li id="main2-echarts4_4"></li>
                <li id="main2-echarts4_5"></li>
                <li id="main2-echarts4_6"></li>
            </ul>
            <div id='break'>

            </div>
        </div>
    </div>

    <img src="images/bigLeft1.png" class='goLeft'/>
    <img src="images/bigRight1.png" class='goRight'/>
</div>
</body>
<script src="js/rem.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.liMarquee.js"></script>
<script src="js/nicescroll.min.js"></script>
<script src="js/idangerous.swiper.min.js"></script>
<script src="js/common.js"></script>
<script src="js/echart1.js"></script>
<script src="js/echart2.js"></script>
<script src="js/echart3.js"></script>
<script src="js/echart4.js"></script>
<script>
    $(function () {

    	 var scrollParam1 = {
            autohidemode:false,
            cursorcolor:"#3693f1",
            cursorwidth:"10px",
            background:"#113d63",
            cursorborder:"none",
            cursorborderradius:"0"
       }
        $('.table_dox1').niceScroll(scrollParam1);
        $('.table_dox2').niceScroll(scrollParam1);
        $('.sec5_div2').niceScroll(scrollParam1);


        //点击切换屏
        $('.goLeft').click(function () {
            $('.main1').show();
          var name = $('.dynamic_list1 .selected').html()
          var name2 =$('.dynamic_list2 .selected').html()
            if(name == '按区域'){
            	$('.table_dox1').show().niceScroll(scrollParam1);
            }
            if(name == '按单位'){
            	$('.table_dox2').show().niceScroll(scrollParam1);
            }
            if(name2 == '今日风险'){
            	$('.sec5_div2').show().niceScroll(scrollParam1);
            }
            $('.main2-table').hide();
            $('.main2-echarts4').hide();
            $('.main2').hide();

        })
        $('.goRight').click(function () {
        	$('.table_dox1').hide();
        	$('.table_dox2').hide();
        	$('.sec5_div2').hide();
            $('.main1').hide();
            $('.main2').show();
            if($('.main2-nav4 .active').index() == 0){
                $('.main2-echarts4').show().niceScroll(scrollParam1);
            }else{
                $('#break').show()
            }

            $('.main2-table').show().niceScroll(scrollParam1);

	        })
        // 轮播图
        var mySwiper1 = new Swiper('.swiper-container1', {
            pagination: '.pagination',
            loop: true,
            autoplay: 2000, // 自动轮播 2秒一次
            // grabCursor: true,
            paginationClickable: true
        })
        $('.swiper-container1').mouseenter(function () {
            mySwiper1.stopAutoplay();
        }).mouseleave(function () {
            mySwiper1.startAutoplay();
        })

        $("#warn").liMarquee({
            direction:'up',
            scrollamount:30
        })
        $('.dynamic_list1 li').on('click',function () {
            var index = $(this).index();
            $(this).addClass('selected').siblings().removeClass('selected');
            $('.section4_main > div').eq(index).show().siblings().hide();
        })
        $('.dynamic_list2 li').on('click',function () {
            var index = $(this).index();
            $(this).addClass('selected').siblings().removeClass('selected');
            $('.section5_main > div').eq(index).show().siblings().hide();
        })
        $('.control_list li').on('click',function () {
            var index = $(this).index();
            $(this).addClass('active').siblings().removeClass('active');
            $('.section5_main > div').eq(index).show().siblings().hide();
        })

        $('.main2-nav4 li').click(function(){
            $(this).attr('class','active').siblings().removeClass('active')
            if($(this).index() == 1){
                $('#break').show()
                $('.main2-echarts4').hide()
            }else{
                $('#break').hide()
                $('.main2-echarts4').show()
            }
        })
    })
    var obj1 = document.getElementById('chart1')
    var option1 = {
        tooltip:{
            /*formatter:"{a}<br/>{c}{b}分",
            backgroundColor:'rgba(255,255,255,0.8)',
            textStyle:{
                color:'black',
            }*/
            formatter: "{a} <br/>{c} {b}"
        },

        legend:{
            x:'center',
            bottom:'0',
            // orient : '',
            // icon:'rect',
            itemWidth:14,
            itemHeight:14,
            iconRadius:3,
            itemGap:15,
            data:['危险 0-59分','较危险 60-69分','较安全 70-89分','安全 90-100分'],
            textStyle:{
                color:'auto',
                fontSize:14,
                fontWeight:100,
            },
            color:['#ff5a4a','#ffc100','#5ddefe','#00ff9c'],
        },
        toolbox:{
            show:false,
        },
        /*grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },*/
        xAxis : [   //这里有很多的show，必须都设置成不显示
            {
                type : 'category',
                data : [],
                axisLine: {
                    show: false
                },
                splitLine:{
                    show: false
                },
                splitArea: {
                    interval: 'auto',
                    show: false
                }
            }
        ],
        yAxis : [ //这里有很多的show，必须都设置成不显示
            {
                type : 'value',
                axisLine: {
                    show: false
                },
                splitLine:{
                    show: false
                },
            }
        ],
        series : [

            {   name:'危险 0-59分',
                type: 'bar',
                itemStyle:{
                    normal:{
                        color:'#ff4b4b'
                    }
                }

            },
            {   name:'较危险 60-69分',
                type: 'bar',
                itemStyle:{
                    normal:{
                        color:'#ff8041'
                    }
                }

            },
            {   name:'较安全 70-89分',
                type: 'bar',
                itemStyle:{
                    normal:{
                        color:'#fffa65'
                    }
                }

            },
            {   name:'安全 90-100分',
                type: 'bar',
                itemStyle:{
                    normal:{
                        color:'#5cdeff'
                    }
                }

            },
            {   name:'加油加气站安全状态',
                type: 'gauge',
                splitNumber: 10,
                // radius: '90%',
                /*startAngle: 180,
                endAngle: 0,*/
                center : ['50%', '45%'],
                axisLine: {
                    show:true,
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 5,
                        color:[
                            [0.6,'#ff4b4b'],
                            [0.7,'#ff8041'],
                            [0.9,'#fffa65'],
                            [1,'#5cdeff']
                        ]
                    },

                },
                axisTick: {            // 坐标轴小标记
                    length:8,        // 属性length控制线长

                },
                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: '#fff'
                    }
                },
                splitLine: {           // 分隔线
                    show: true,        // 默认显示，属性show控制显示与否
                    length :12,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer : {
                    width : 5
                },
                detail: {
                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    formatter:"{value}分",
                    // offsetCenter:[0,'-40%'],
                    // height:30,
                    rich:{
                        score:{
                            color:'auto',
                            fontFamily:'微软雅黑'
                        }
                    },
                    textStyle:{
                        fontSize:14
                    }

                },
                data:[{value: 78.8}]
            }
        ]
    };
    var obj2 = document.getElementById('chart2')
    var data2 =[25, 55, 15, 15, 39, 8, 22,25, 55, 15, 15, 39, 8, 22,25, 55, 15, 15, 39, 8, 22]
    var option2 = {
        title:{
        },
        tooltip : {
            trigger: 'axis',
        },
        grid: {
            left: '3%',
            right: '3%',
            bottom: '10%',
            top: '8%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['安全管理', '基坑工程', '模板工程', '消防安全', '高处作业', '临时用电', '支架安全','安全管理', '基坑工程', '模板工程', '消防安全', '高处作业', '临时用电', '支架安全','安全管理', '基坑工程', '模板工程', '消防安全', '高处作业', '临时用电', '支架安全'],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel:{
                    textStyle:{
                        color:'#ffffff'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'#18bdc4'
                    }
                }

            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel:{
                    textStyle:{
                        color:'#ffffff'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'#18bdc4'
                    }
                },
                splitLine:{
                    lineStyle:{
                        color:'#3865aa'
                    }
                }
            }
        ],
        dataZoom:[
            {
                type:'slider',
                show:true,
                start:70,
                end:100,
                handleSize:8,
                bottom:0,
                height:12,
                textStyle:false
            },
            {
                type:'inside',
                start:70,
                end:100
            },
            {
                type:'slider',
                show:false,
                yAxisIndex:0,
                filterMode:'empty',
                width:12,
                height:'70%',
                handleSize:8,
                showDataShadow:false,
                left:'96%'
            }
        ],
        series : [

            {
                name:'',
                type:'bar',
                barWidth: '20%',
                data:data2,
                itemStyle:{
                    normal:{
                        color:function(params){
                            var colorList = ['#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff','#1efcff']
                            return colorList[params.dataIndex]
                        }
                    }
                }

            },
        ]
    };
    var obj3 = document.querySelector('.chart3')
    console.log(obj3)
    var data3 =[7, 5, 2, 8, 3]
    var option3 = {
        title:{
        },
        tooltip : {
            trigger: 'axis',
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '8%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['重大风险', '已监控', '待监控', '受控', '不受控'],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel:{
                    textStyle:{
                        color:'#ffffff'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'#18bdc4'
                    }
                }

            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel:{
                    textStyle:{
                        color:'#ffffff'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'#18bdc4'
                    }
                },
                splitLine:{
                    lineStyle:{
                        color:'#3865aa'
                    }
                }
            }
        ],
        series : [

            {
                name:'',
                type:'bar',
                barWidth: '20%',
                data:data3,
                itemStyle:{
                    normal:{
                        color:function(params){
                            var colorList = ['#f62149','#07cc54','#7b7b7b','#1058e4','#a521ca']
                            return colorList[params.dataIndex]
                        }
                    }
                }

            },
        ]
    };
    var obj4 = document.querySelector('.chart4')
    var option4 = {
        title : {

        },
        tooltip : {
            trigger: 'item',
            formatter: "{b}<br/> {c} ({d}%)"
        },
        toolbox: {

        },
        grid: {
            top: '8%',
            containLabel: true
        },
        calculable : true,
        series : [
            {
                name:'',
                type:'pie',
                // radius : [15, 75],
                // center : ['75%', 200],
                roseType : 'area',
                // x: '50%',               // for funnel
                // max: 40,                // for funnel
                sort : 'ascending',     // for funnel
                data:[
                    {value:200, name:'活动作业'},
                    {value:300, name:'安全防护设施拆除'},
                    {value:300, name:'施工现场危险作业'},
                    {value:120, name:'交叉作业'},
                    {value:268, name:'起重作业'}
                ],
                label: {
                   normal:{
                       formatter:'{b}\n {c} ({d}%)',
                       color:'#1efcff'
                   }
                },
                itemStyle:{
                    normal:{
                        color:function(params){
                            var colorList1 = ['#34d3f5','#f22284','#14f9a5','#54ec44','#ff3e30']
                            var colorList2 = ['#3795ff','#833af7','#11d4b9','#cabe3b','#ffc218']
                            return new echarts.graphic.LinearGradient(0,0,0,1,[
                                {offset:0,color:colorList1[params.dataIndex]},
                                {offset:1,color:colorList2[params.dataIndex]}
                                ])
                        }
                    }
                }
            }
        ]
    };
    function count(obj,option){
        var Chart4 = echarts.init(obj);
        Chart4.setOption(option);
    }
    count(obj1,option1)
    count(obj2,option2)
    count(obj3,option3)
    count(obj4,option4)

</script>
</html>